<template>
    <section>
        <div class="list_top tanxin">
            <h3>{{title}}</h3>
            <span>{{arr.length}}</span>
        </div>
        <ul class="list_down">
            <li class="tanxin" v-for="(item,index) in arr" :key="item.id">
                <input type="checkbox" class="chx" :checked="title==='已经完成'" @click.prevent="chxFn(index, title)" />
                <div class="txt">
                    <span v-show="!item.ifinput" @click="item.ifinput=true">{{item.content}}</span>
                    <input v-show="item.ifinput" type="text" v-model="item.content" v-focus="item.ifinput" @blur="inputblur(item)" />
                </div>
            </li>
        </ul>
    </section>
</template>

<script>
export default {
  props: ["title", "arr"],
  methods: {
      // 复选框点击
      chxFn(index, title){
          // 判断此时点击的是goingArr的数组项，还是doneArr的数组项(title==='正在进行')
          // 提取被点击的那一项
          // 子传父，让父级去删除某一项或者增加某一项
          this.$emit("chxfn", index, title)
      },
      // 失焦
      inputblur(item){
          item.ifinput = false;   // 显示span
          // 存储到localStorage，这里子组件存起来比较麻烦，最简单的方式是通过父组件存储
          this.$emit("cunchu");
      }
  },
  directives: {
      focus: {
          update(el, binding){
              if(binding.value){
                  el.focus();
              }
          }
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.list_top{height: 50px;}
.list_top span{width: 30px;height: 30px;background: #ccf;border-radius: 50%;text-align: center;line-height: 30px;}
.list_down li{background: #fff;padding: 10px;margin-bottom: 20px;}
.list_down li .chx{margin-right: 10px;}
.list_down li .txt{flex: 1;}
.list_down li .txt span{font-size: 18px;}
.list_down li .txt input{outline-color: #ccf;width: 60%;height: 30px;text-indent: 1em;}
</style>
